<!--操作-->
<!--<nz-row>-->
<!--&lt;!&ndash;  <button nz-button nzType="primary" (click)="showCheckModal(true)"&ndash;&gt;-->
<!--&lt;!&ndash;          *ngIf="permission.userPermission.has('customization:manage:order-manage:check')">批量审核&ndash;&gt;-->
<!--&lt;!&ndash;  </button>&ndash;&gt;-->
<!--  <button nz-button nzType="primary"-->
<!--          *ngIf="permission.userPermission.has('customization:manage:order-manage:exportMain')">导出主要-->
<!--  </button>-->
<!--  <button nz-button nzType="primary"-->
<!--          *ngIf="permission.userPermission.has('customization:manage:order-manage:exportDetail')">导出明细-->
<!--  </button>-->
<!--</nz-row>-->
<!--过滤查询-->

<!-- search START -->
<nz-card class="m-b-2">
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">订单编号</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入订单编号" [(ngModel)]="query.orderNum" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">用户</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入用户ID或手机号码" [(ngModel)]="query.userPhone" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">状态</label>
        <div class="common-search-conrol">
          <nz-select
            [(ngModel)]="query.status"
            [nzMaxTagCount]="1"
            nzMode="multiple"
            nzAllowClear
            nzPlaceHolder="请选择状态">
            <nz-option *ngFor="let item of statusOptions" [nzLabel]="item.value" [nzValue]="item.id"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">下单时间</label>
        <div class="common-search-conrol">
          <nz-range-picker nzShowTime [(ngModel)]="query.createTime"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">付款时间</label>
        <div class="common-search-conrol">
          <nz-range-picker nzShowTime [(ngModel)]="query.payTime"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">完成时间</label>
        <div class="common-search-conrol">
          <nz-range-picker nzShowTime [(ngModel)]="query.successTime"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">平台</label>
        <div class="common-search-conrol">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择平台" [(ngModel)]="query.platform">
            <nz-option
              *ngFor="let item of channelOptions"
              [nzLabel]="item.name"
              [nzValue]="item.content">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">渠道</label>
        <div class="common-search-conrol">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择渠道" [(ngModel)]="query.cid">
            <nz-option
              *ngFor="let item of extensionOptions"
              [nzLabel]="item.name"
              [nzValue]="item.content">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">订单类型</label>
        <div class="common-search-conrol">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择订单类型" [(ngModel)]="query.freeGiftFlag">
            <nz-option nzLabel="普通" nzValue="0"></nz-option>
            <nz-option nzLabel="赠送" nzValue="1"></nz-option>
            <nz-option nzLabel="兑换" nzValue="2"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <button nz-button nzType="primary" class="m-r-8" (click)="queryBtn()">查询</button>
        <button nz-button nzType="default" (click)="resetCondition()">重置</button>
        <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
          {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
        </button>
      </div>
    </div>
  </div>
</nz-card>
<!-- search END -->

<nz-card class="pagination-wrap-position">
  <div class="operation-wrap p-b-10">
    <button nz-button nzType="primary" [nzLoading]="exportLoading" (click)="exportTable()">
      <i nz-icon nzType="export" nzTheme="outline"></i>导出
    </button>
  </div>

  <!--表格-->
  <nz-table
    #rowSelectionTable
    nzShowSizeChanger
    nzShowQuickJumper
    nzSize="small"
    nzOuterBordered
    [nzLoading]="tableLoading"
    [nzScroll]="{ x: '1150px' }"
    [nzData]="listOfData.records"
    [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
    [nzTotal]="listOfData.total"
    [(nzPageIndex)]="query.page"
    [(nzPageSize)]="query.pageSize"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
  <thead>
    <tr>
      <th nzAlign="center" nzWidth="80px" nzLeft [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"></th>
      <th nzAlign="center" nzWidth="220px" nzLeft>订单号</th>
      <th nzAlign="center" nzWidth="250px">平台渠道</th>
      <th nzAlign="center" nzWidth="130px">用户ID</th>
      <th nzAlign="center" nzWidth="80px">商品</th>
      <th nzAlign="center" nzWidth="90px">优惠总额</th>
      <th nzAlign="center" nzWidth="100px">爱豆</th>
      <th nzAlign="center" nzWidth="90px">实收金额</th>
      <th nzAlign="center" nzWidth="180px">收货人+电话</th>
      <th nzAlign="center" nzWidth="250px">收货地址</th>
      <th nzAlign="center" nzWidth="180px">物流信息</th>
      <th nzAlign="center" nzWidth="225px">下单时间+付款时间</th>
      <th nzAlign="center" nzWidth="90px">订单状态</th>
      <th nzAlign="center" nzWidth="200px" nzRight>操作</th>
    </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index">
    <td
      nzLeft
      nzAlign="center"
      [nzChecked]="setOfCheckedId.has(data['id'])"
      (nzCheckedChange)="onItemChecked(data['id'], $event)"
    ></td>
    <!-- 订单号 -->
    <td nzLeft nzAlign="center">
      {{ data['orderNum'] }}
      <span *ngIf="data['freeGiftFlag'] != '0'" [ngStyle]="{'color': data['freeGiftFlag'] == '1' ? 'red' : '#2db7f5'}">
        ({{ data['freeGiftFlag'] | giftFlag }})
      </span>
    </td>
    <!-- 用户渠道 -->
    <td nzAlign="center">
      <!-- 渠道 & 平台 -->
      <div class="p-b-5">
        <ng-container *ngFor="let channelItem of channelOptions">
          <nz-tag
              *ngIf="channelItem.content == data['platform']"
              [nzColor]="channelItem.color">
              {{ channelItem.name }}
          </nz-tag>
        </ng-container>

        <ng-container>
          <nz-tag [nzColor]="'#2db7f5'" *ngIf="data['userType'] == 2">B端</nz-tag>
          <nz-tag [nzColor]="'#87d068'" *ngIf="data['userType'] == 1">C端</nz-tag>
        </ng-container>
      </div>

      <!-- 推广渠道 cid -->
      <div>
        <ng-container *ngFor="let extension of extensionOptions">
          <nz-tag
              *ngIf="extension.content == data['cid']"
              nzColor="#87CEFA">
              {{ extension.name }}
          </nz-tag>
        </ng-container>
      </div>
    </td>
    <!-- 用户ID -->
    <td nzAlign="center">
      <span>
        {{ data['userId'] }}
        <ng-container *ngIf="data['numberCount'];else templateCount">
          ({{ data['numberCount'] === 1 ? '首' : data['numberCount'] }}单)
        </ng-container>
        <ng-template #templateCount>-</ng-template>
      </span>
    </td>
    <!-- 商品 -->
    <td nzAlign="center">{{ data['goodsName'] }}
      <img
        width="22px"
        *ngIf="data['goodsImg'][0]"
        [src]="data['goodsImg'][0]"
        (click)="showImg(data['goodsImg'])"
      />
    </td>
    <!-- 优惠总额 -->
    <td nzAlign="center">
      <!-- {{ data['favorablePrice'] || '0' }} -->
      {{ (data['favorablePrice'] || 0) + (data['dzCouponAmount'] || 0) }}
    </td>
    <!-- 爱豆 -->
    <td nzAlign="center">{{ data['aiDouAmount'] || '0' }}</td>
    <!-- 实收金额 -->
    <td nzAlign="center">{{ data['realPrice'] || '0' }}</td>
    <td>
      <div>收货人:{{ data['consignee'] }}</div>
      <div>电话:{{ data['tel'] }}</div>
    </td>
    <td>{{ data['address'] }}</td>
    <td nzAlign="center">{{ data['expressCode'] }}</td>
    <td nzAlign="center">
      <div style="white-space: nowrap">下单时间:{{ data['createTime'] }}</div>
      <div style="white-space: nowrap">付款时间:{{ data['payTime'] }}</div>
    </td>
    <!-- <td nzAlign="center" [ngStyle]="{color: data['refundState']===3?'#67C23A':computeColor(data['status']),'white-space': 'nowrap'}">{{ data['refundState'] === 3 ? '交易结束' : data['status']|orderStatus }}</td> -->
    <td nzAlign="center" [ngStyle]="{color: computeColor(data['status']),'white-space': 'nowrap'}">{{ data['status'] | orderStatus }}</td>
    <td nzAlign="center" nzRight>
      <a (click)="toDetail(data['id'])" style="margin-right: 8px;white-space: nowrap">查看</a>
      <!--      <a (click)="showCheckModal()" style="margin-left: 8px"-->
      <!--         *ngIf="permission.userPermission.has('customization:manage:order-manage:check')">审核</a>-->
      <a (click)="showTrackModal(data['id'])" style="margin-right: 8px;white-space: nowrap"
        *ngIf="permission.userPermission.has('customization:manage:order-manage:track')">跟进</a>
    </td>
  </tr>
  </tbody>
  </nz-table>
  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>
</nz-card>

<!--审核模态框-->
<nz-modal
  [(nzVisible)]="checkModal.visible"
  nzTitle="审核"
  (nzOnCancel)="hideCheckModal()"
>
  <ng-container *nzModalContent>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" style="text-align: right">
        <label for="remark">审核意见:</label>
      </nz-col>
      <nz-col nzSpan="19" nzOffset="1">
        <textarea id="remark" rows="6" style="width: 100%" nz-input placeholder="请输入审核意见"
                  [(ngModel)]="checkModal.remark"></textarea>
      </nz-col>
    </nz-row>
  </ng-container>
  <ng-container *nzModalFooter>
    <button nz-button nzType="primary" [nzLoading]="checkModal.loading" (click)="checkResult(true)">通过<span
      *ngIf="checkModal.multiple">({{setOfCheckedId.size}})</span></button>
    <button nz-button nzType="primary" [nzLoading]="checkModal.loading" (click)="checkResult(false)" nzDanger>拒绝<span
      *ngIf="checkModal.multiple">({{setOfCheckedId.size}})</span>
    </button>
  </ng-container>
</nz-modal>
<!--跟进模态框-->
<nz-modal nzWidth="1050px"
          [nzVisible]="trackModal.visible"
          nzTitle="跟进"
          (nzOnCancel)="hideTrackModal(false)"
          [nzFooter]="null"
>
  <ng-container *nzModalContent>
    <textarea rows="4" nz-input placeholder="请输入跟进内容" style="width: 100%" [(ngModel)]="trackModal.remark"></textarea>
    <div style="margin-top: 8px;display: flex;justify-content: space-between">
      <nz-upload [(nzFileList)]="trackModal.file" [nzAccept]="'image/*,.pdf,.txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx'"
                 [nzBeforeUpload]="beforeUpload">
        <button nz-button>
          选择文件
        </button>
        <span>请选择图片、office文件、PDF文件</span>
      </nz-upload>
      <button nz-button nzType="primary" (click)="hideTrackModal(true)">保存</button>
    </div>
    <nz-row style="margin-top: 8px;max-height: 604px;overflow-y: auto" *ngIf="trackHistoryList.length">
      <!--      <nz-divider nzText="跟进信息"></nz-divider>-->
      <nz-timeline style="padding: 8px;width: 100%">
        <nz-timeline-item [nzLabel]="lt['createTime']"
                          *ngFor="let lt of trackHistoryList">
          {{lt['station']}}
          <div>{{lt['follower']}}</div>
          <div>{{lt['content']}}</div>
          <a *ngIf="lt['enclosure']" [href]="lt['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
        </nz-timeline-item>
      </nz-timeline>
    </nz-row>
  </ng-container>
</nz-modal>

